<template>
	<view class="scroll-view">
		<!-- 左侧 -->
		<scroll-view scroll-y="true" :style="{height: shebei + 'px'}" class="scroll1" >
			<view class="scroll-view-item" v-for="(item,index) in list3">{{item.categoryName}}</view>
		</scroll-view>
		<!-- 右侧 :style="{height: wh + 'px'}"-->
		<scroll-view scroll-y="true" :style="{height: shebei + 'px'}" class="scroll2" >
			<view class="scroll-view-item2" v-for="(item2, index) in list2" @click="goContent(item2)">{{item2.name}}</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前设备可用的高度
				wh: 0,
				shebei: '',
				list3:'',
				list4:'',
				list1: [
					{'id': '0', name:'一级分类0'},
					{'id': '1', name:'一级分类1'},
					{'id': '2', name:'一级分类2'},
					{'id': '3', name:'一级分类3'},
					{'id': '4', name:'一级分类4'},
					{'id': '5', name:'一级分类5'},
					{'id': '6', name:'一级分类6'},
					{'id': '7', name:'一级分类7'},
					{'id': '8', name:'一级分类8'},
					{'id': '9', name:'一级分类9'},
					{'id': '10', name:'一级分类10'},
					{'id': '11', name:'一级分类11'},
					{'id': '12', name:'一级分类12'},
					{'id': '13', name:'一级分类13'},
					{'id': '14', name:'一级分类14'},
					{'id': '15', name:'一级分类15'},
					{'id': '16', name:'一级分类16'}
				],
				list2:[
					{'id': '0', name:'二级分类0'},
					{'id': '1', name:'二级分类1'},
					{'id': '2', name:'二级分类2'},
					{'id': '3', name:'二级分类3'},
					{'id': '4', name:'二级分类4'},
					{'id': '5', name:'二级分类5'},
					{'id': '6', name:'二级分类6'},
					{'id': '7', name:'二级分类7'},
					{'id': '8', name:'二级分类8'},
					{'id': '9', name:'二级分类9'},
					{'id': '10', name:'二级分类10'},
					{'id': '11', name:'二级分类11'},
					{'id': '12', name:'二级分类12'},
					{'id': '13', name:'二级分类13'},
					{'id': '14', name:'二级分类14'},
					{'id': '15', name:'二级分类15'},
					{'id': '16', name:'二级分类16'}
				]
			};
		},
		onLoad() {
		  const shebei = uni.getSystemInfoSync()
		  console.log(shebei)
		  this.wh = shebei.windowHeight - 50
		  this.fenLei()
		},
		methods: {
			//寄售订单评价
			fenLei() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/getCategoryList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     afterAjax: (res) => {
						 		console.log(res,'分类')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: '获取分类失败',
						 				icon: 'none'
						 			})
						 		}
						 		if (res.code == 200) {
						 			console.log('拿到分类',res)
									that.list3 = res.data
									// that.list4 = that.list3.categoryChild
									console.log(that.list3)
									// console.log(that.list4)
						 		}
				     }
				    })
			},
			goContent(item2) {
				let data = JSON.stringify(item2)
				uni.navigateTo({
					url: 'consignment-content?index='+data
				})
			}
			
		}
	}
</script>

<style lang="scss">
.scroll-view {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	.scroll1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 217rpx;
		padding: 34rpx 0 34rpx 25rpx;
		font-size: 25rpx;
		border-bottom: 1rpx solid #d1d1d1;
		background-color: #FFFFFF;
		
		font-weight: 600;
		.scroll-view-item {
			padding: 34rpx 0 34rpx 25rpx;
			font-size: 25rpx;
			border-bottom: 1rpx solid #d1d1d1;
			width: 286rpx;
			height: 105rpx;
			font-weight: 600;
		}
	}
	.scroll2 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 463rpx;
		padding: 34rpx 0 34rpx 25rpx;
		font-size: 25rpx;
		background-color: #f5f5f5;
		.scroll-view-item2 {
			width: 463rpx;
			height: 58px;
			padding: 34rpx 0 34rpx 25rpx;
			font-size: 25rpx;
			background-color: #f5f5f5;
		}
	 }
	
}
</style>
